 <template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <p>获取状态对象并取值:count: {{ $store.state.count }}</p>
      <button @click="increment">点击+1</button>
      <button @click="sub">点击-1</button>
      <button @click="increment1">点击1秒后+1</button>
      <button @click="increment2">点击+2</button>
      <button @click="increment3">点击+3</button>
      <button @click="incrementNumber(4)">点击+4</button>
      <button @click="increment4">点击+6再+4</button>
      <button @click="increment5">点击+6再-1再+5</button>
    </div>
  </div>
</template> 

<script>
import { mapActions } from "vuex";
export default {
  name: "Test8",
  props: {
    msg: String,
  },
  methods: {
    increment5() {
      this.$store.dispatch("add5").then(() => {
        this.incrementNumber(5);
      });
    },
    increment4() {
      this.$store.dispatch("add6").then(() => {
        this.incrementNumber(4);
      });
    },
    increment3() {
      // 以对象形式分发
      this.$store.dispatch({
        type: "incrementAsync2",
        amount: 3,
      });
    },
    increment2() {
      // 以载荷形式分发
      this.$store.dispatch("incrementAsync2", {
        amount: 2,
      });
    },
    increment1() {
      this.$store.dispatch("incrementAsync");
    },
    /* increment() {
      this.$store.dispatch("increment");
    }, */
    /* decrement() {
      this.$store.dispatch("decrement");
    }, */
    ...mapActions([
      "increment", // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      "incrementNumber", // 将 `this.incrementNumber(amount)` 映射为 `this.$store.dispatch('incrementNumber', amount)`
    ]),
    ...mapActions({
      sub: "decrement", // 将 `this.sub()` 映射为 `this.$store.dispatch('decrement')`
    }),
  },
};
</script>
